<!DOCTYPE html>
<html>
<head>
	<title>div+css作业</title>
	<link rel="stylesheet" type="text/css" href="./w4_div+css.css">
	<link rel="stylesheet" href="./bootstrap-3.3.7-dist/css/bootstrap.min.css">
	<script type="text/javascript" src="./bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</head>
<body>
	<!-- 头部 start-->
	<div id="header">
		<div id="csdn_toolbar">
				<ul id="content_list">
					<li><img id="title_img" src="./images/csdn_logo.png"></li>
					<li><a href="#">首页</a></li>
					<li><a href="#">博客</a></li>

					<li><a href="#">学院</a></li>

					<li><a href="#">下载</a></li>

					<li><a href="#">图文课</a></li>

					<li><a href="#">论坛</a></li>

					<li><a href="#">app</a></li>

					<li><a href="#">问答</a></li>

					<li><a href="#">商城</a></li>

					<li><a href="#">VIP会员</a></li>

					<li><a href="#">活动</a></li>

					<li><a href="#">招聘</a></li>

					<li><a href="#">ITeye</a></li>

					<li><a href="#">GitChat</a></li>
				</ul>
				<div class="pull-right">
					<ul class="pull-right-ul">
						<li><input type="search" class="search_box" placeholder="搜索学院课程"></li>
						<li><img src="./images/loockBlog.jpg"><a href="#">写博客</a></li>
						<li><img src="./images/qianbao.jpg"><a href="#">赚零钱</a></li>
						<li><img src="./images/email.jpg"><a href="#">消息</a></li>
						<li><a class="circle" href="#"></a></li>

					</ul>
				</div>

		</div>
		<div class="clear"></div>
		<div id="nav_wrap">
			<ul class="nav_listbox">
				<li class="nav_list"><a href=""><img src="./images/EDU.jpg"></a></li>
				<li class="nav_list"><a href="#">视频课</a></li>
				<li class="nav_list"><a href="#">讲师</a></li>
				<li class="nav_list"><a href="#">直播</a></li>
				<li class="nav_list"><a href="#">每日秒杀</a></li>
				<li class="nav_list"><a href="#">会员</a></li>
				<li class="nav_list"><a href="#">会员免费</a></li>
				<li class="nav_list"><a href="#">3月限免</a></li>
				<li class="nav_list"><a href="#">TinyMind</a></li>
				<li class="nav_list"><a href="#">课程答疑</a></li>
				<li class="nav_list"><a href="#">证书查询</a></li>
				<li class="nav_list"><a href="#">我要开课</a></li>

			</ul>			
		</div>
	</div>
    <!-- 头部 end -->
<div class="clear"></div>
	<!-- 内容 start -->
	<div id="center">
		<div id="aside">
			<div id="vip">
				<ul class="vipright_list">
					<li><a href="#">我是会员</a></li>
					<li><a href="#"><img src="./images/kecheng.png" alt="">我的课程</a></li>
					<li><a href="#"><img src="./images/huiyuan.jpg" alt="">我的会员</a></li>
					<li><a href="#"><img src="./images/qianbao.jpg" alt="">我的红包</a></li>
					<li><a href="#"><img src="./images/tiwen.jpg" alt="">我的提问</a></li>
					<li><a href="#"><img src="./images/dingdan.jpg" alt="">我的订单</a></li>
					<li><a href="#"><img src="./images/youhui.jpg" alt="">优惠劵</a></li>
					<li><a href="#"><img src="./images/jiangshi.jpg" alt="">讲师卡</a></li>

				</ul>
			</div>
			<div id="vip_right">
				<ul class="vipright_list">
					<li><a href="#">会员特权</a></li>
					<li><a href="#"><img src="./images/mei1.jpg" alt="">千门专享课程免费领</a></li>
					<li><a href="#"><img src="./images/mei2.jpg" alt="">精品课程每月免费兑</a></li>
					<li><a href="#"><img src="./images/mei3.jpg" alt="">购课低至八折</a></li>
					<li><a href="#"><img src="./images/mei4.jpg" alt="">600次下载特权</a></li>
					<li><a href="#"><img src="./images/mei5.jpg" alt="">专享讲师社群答疑</a></li>
				</ul>
			</div>
		</div>

		<div id="course">
			<div id="coursetitle">
				<ul class="course_title">
					<li class="nav_list"><a href="">已购课程</a></li>
					<li class="nav_list"><a href="#">最近播放的</a></li>
					<li class="nav_list"><a href="#">收藏的课程</a></li>
					<li class="nav_list"><a href="#">活动课程</a></li>
				</ul>
			</div>
			<div id="coursetype">
				<ul class="coursetype_list">
					<li class="nav_list"><a href="">类型</a></li>
					<li class="nav_list"><a href="#">全部</a></li>
					<li class="nav_list"><a href="#">课程</a></li>
					<li class="nav_list"><a href="#">套餐</a></li>
					<li class="nav_list"><a href="#">直播</a></li>
					<li class="nav_list"><a href="#">教学中心</a></li>
					<li class="nav_list"><a href="#">已领取课程</a></li>


				</ul>
			</div>
			<div id="course_list">
				<ul>
					<li>
						<div class="course_div">
							<div class="course_img"><img src="./images/tup1.jpg" alt=""></div>
							<div class="course_info">
								<span>python全栈工程师--第五周</span>
								<span>课程时长：13课时/07小时54分钟25秒</span>
								<span>学习进度：<progress value="70" max="100"></span>
								<button>继续学习</button>
							</div>
						</div>
					</li>
					<li>
						<div class="course_div">
							<div class="course_img"><img src="./images/tup1.jpg" alt=""></div>
							<div class="course_info">
								<span>python全栈工程师--第五周</span>
								<span>课程时长：13课时/07小时54分钟25秒</span>
								<span>学习进度：<progress value="70" max="100"></span>
								<button>继续学习</button>
							</div>
						</div>
					</li>
					<li>
						<div class="course_div">
							<div class="course_img"><img src="./images/tup1.jpg" alt=""></div>
							<div class="course_info">
								<span>python全栈工程师--第五周</span>
								<span>课程时长：13课时/07小时54分钟25秒</span>
								<span>学习进度：<progress value="70" max="100"></span>
								<button>继续学习</button>
							</div>
						</div>
					</li>
					<li>
						<div class="course_div">
							<div class="course_img"><img src="./images/tup1.jpg" alt=""></div>
							<div class="course_info">
								<span>python全栈工程师--第五周</span>
								<span>课程时长：13课时/07小时54分钟25秒</span>
								<span>学习进度：<progress value="70" max="100"></span>
								<button>继续学习</button>
							</div>
						</div>
					</li>
					<li>
						<div class="course_div">
							<div class="course_img"><img src="./images/tup1.jpg" alt=""></div>
							<div class="course_info">
								<span>python全栈工程师--第五周</span>
								<span>课程时长：13课时/07小时54分钟25秒</span>
								<span>学习进度：<progress value="70" max="100"></span>
								<button>继续学习</button>
							</div>
						</div>
					</li>
					<li>
						<div class="course_div">
							<div class="course_img"><img src="./images/tup1.jpg" alt=""></div>
							<div class="course_info">
								<span>python全栈工程师--第五周</span>
								<span>课程时长：13课时/07小时54分钟25秒</span>
								<span>学习进度：<progress value="70" max="100"></span>
								<button>继续学习</button>
							</div>
						</div>
					</li>

				</ul>

				<div class="page-box">
							<span class="page-nav">
								<span class="text">共70条数据</span>
								 <a href="#" class="btn btn-xs btn-default btn-prev"><</a>
								 <span class="btn btn-xs btn-default active">1</span> 
								 <a class="btn btn-xs btn-default " href="#">2</a> 
								 <a class="btn btn-xs btn-default " href="#">3</a> 
								 
								 <span class="ellipsis">...</span>
								 <a class="btn btn-xs btn-default" href="#">11</a>
								  <a href="" class="btn btn-xs btn-default btn-next">></a>
							</span>
							<span class="page-go">
                    		<span class="text">到第</span>
                    		<input id="skip" type="text">
                    		<span class="text">页</span>
                    		<a class="btn btn-xs btn-default btn-go" href="javascript:skip();">GO</a>
                  </span>
			</div>
			</div>
		</div>
	</div>
	<!-- 内容 end -->

    <div class="clear"></div>
	<!-- 页脚 start -->
	<div id="footer">
		
				<p><a class="right-dotte" href="//www.csdn.net/company/index.html#about" target="_blank">关于我们</a>
				<a href="//www.csdn.net/company/index.html#recruit" target="_blank" class="right-dotte">招聘</a>
				<a href="//www.csdn.net/company/index.html#contact" target="_blank" class="right-dotte">广告服务</a>
				<a href="https://www.csdn.net/gather/A" target="_blank" class="footer_baidu">网站地图</a>
			</p>
			
			
			<div class="contact-info">        
				<em>
						<span class="txt right-dotte"><img  src="./images/QQ.jpg"> QQ客服</span>
						<span class="txt right-dotte"><img  src="./images/emai.jpg"> kefu@csdn.net</span></a>
						<span class="right-dotte"><img  src="./images/kefu.jpg"> 客服论坛</span></a>
						<span class="right-dotte"><img  src="./images/tel.jpg"> 400-660-0108</span>
						<span>工作时间 8:30-22:00</span>
				</em>        
		    </div>

		    <div class="feed_copyright">            
		    	<p class="fz12_baidu">
		    		<a href="https://zn.baidu.com/cse/home/index" target="_blank">
		    		<em>百度提供站内搜索</em>
		    	   </a>&nbsp;
		    	   <a href="http://www.miibeian.gov.cn/publish/query/indexFirst.action" target="_blank" class="ml14">京ICP备19004658号</a>
		    	</p> 
		    	   <p class="fz12_baidu">©1999-2019 北京创新乐知网络技术有限公司 </p>           
		    </div>

		    <div class="allow-info-box">       
		     <a href="https://blog.csdn.net/blogdevteam/article/details/90369522" target="_blank"><span>版权申诉</span></a>  
		     <a href="https://download.csdn.net/index.php/tutelage/" target="_blank"><span>家长监护</span></a>        
		     <a href="https://csdnimg.cn/cdn/content-toolbar/csdn-ICP.png" target="_blank" style="font-weight:300">经营性网站备案信息</a>        
		     <em><a href="http://www.cyberpolice.cn/" target="_blank"><span>网络110报警服务</span></a></em>   
		     <a href="http://www.12377.cn/" target="_blank"><span>中国互联网举报中心</span></a>  
		     <a href="http://www.bjjubao.org/" target="_blank"><span>北京互联网违法和不良信息举报中心</span></a> 
		    </div>


		
	</div>
	<!-- 页脚 end -->
</body>
</html>